<template>
	<view class="container">
		<iframe id="mapPage" width="100%" height="100%" frameborder=0 :src="src">
		</iframe>
		<view class="z-btn-plus map-btn">
			<button type="primary" @click="myxd.selectOk">选定</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['mapKey'],
		data() {
			return {
				longitude: 116.39742,
				latitude: 39.909,
				address: '122323',
				poiname: 'name'
			}
		},
		computed: {
			src() {
				let src = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${this.mapKey}&referer=飞砂走石WEB`
				return src
			}
		},
		methods: {
			parentSelectOk(obj) {
				console.log('选定了', obj);
				let self = this
				self.address = obj.address
				self.poiname = obj.poiname
				uni.$emit('locateOk', {
					latitude: obj.latitude,
					longitude: obj.longitude,
					address: obj.address,
					poiname: obj.poiname
				})
				uni.navigateBack()
			}
		},
	}
</script>
<script module="myxd" lang="renderjs">
	let obj = {}
	export default {
		mounted() {
			window.addEventListener('message', function(event) {
				// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
				var loc = event.data;
				if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
					console.log('location', loc);
				}
				obj.latitude = loc.latlng.lat
				obj.longitude = loc.latlng.lng
				obj.address = loc.poiaddress
				obj.poiname = loc.poiname
				console.log('myxd obj', obj);
			}, false);
		},
		methods: {
			selectOk(event, ownerInstance) {
				console.log(obj)
				if (Object.keys(obj).length === 0) {
					console.log('没有')
					// uni.showToast({
					// 	title: '请选择地址',
					// 	icon: 'none', //success 等
					// 	duration: 1000
					// })
					alert('请选择地址')
					return
				} else {
					ownerInstance.callMethod('parentSelectOk', obj)
				}

			}
		}
	}
</script>

<style scoped>
	.z-btn-plus {
		position: fixed;
		bottom: 20rpx;
		/* right: 10rpx; */
		z-index: 1;
		width: 100%;
		background: #00FFFF;
		/* #ifdef APP-PLUS */
		/* opacity: 0.6; */
		/* #else APP-PLUS */
		/* opacity: 0.6; */
		/* #endif */
	}

	.container {
		/*地图(容器)显示大小*/
		width: 100%;
		height: 1500rpx;
	}

	.map-btn {
		position: fixed;
		bottom: 2%;
		/* right: 10rpx; */
	}
</style>